<template>
  <view class="my-userinfo-container">
    <!-- 顶部用户信息卡片 -->
    <view class="user-card">
      <view class="user-header" @click="goto_infomation">
        <image :src="avatarUrl" class="avatar" mode="aspectFill"></image>
        <view class="user-meta">
          <view class="nickname">{{nickname}}</view>
          <view class="role-badge">{{role}}</view>
          <view class="signature">{{personSignature || '这个人很懒，什么都没留下~'}}</view>
        </view>
        <uni-icons type="arrowright" size="20" color="#999"></uni-icons>
      </view>
      
      <view class="achievement-card" @click="getAchievement">
        <view class="achievement-title">
          <uni-icons type="medal" size="18" color="#ff9800"></uni-icons>
          <text>志愿成就</text>
        </view>
        <view class="achievement-desc">查看您的志愿服务经历</view>
        <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
      </view>
    </view>

    <!-- 活动分类导航 -->
    <view class="menu-card">
      <view class="menu-item" v-for="item in activityMenus" :key="item.id" @click="gotoActivityDetail(item.id)">
        <view class="menu-content">
          <uni-icons :type="item.icon" size="18" :color="item.color"></uni-icons>
          <text>{{item.title}}</text>
        </view>
        <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
      </view>
    </view>

    <!-- 系统设置 -->
    <view class="menu-card">
      <view class="menu-item" @click="logout">
        <view class="menu-content">
          <uni-icons type="logout" size="18" color="#f44336"></uni-icons>
          <text>退出登录</text>
        </view>
        <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex'
  export default {
    data() {
      return {
        activityMenus: [
          { id: 1, title: '我创建的活动', icon: 'plus', color: '#4caf50' },
          { id: 2, title: '我参加的活动', icon: 'person', color: '#2196f3' },
          { id: 3, title: '进行中的活动', icon: 'refresh', color: '#ff9800' },
          { id: 4, title: '已完成的活动', icon: 'checkmarkempty', color: '#9c27b0' }
        ]
      };
    },
    computed: {
      ...mapState('my_user', ['nickname', 'personSignature', 'avatarUrl', 'role']),
    },
    methods: {
      ...mapMutations('my_user', ['updateToken','updateNickname','updateAvatarUrl','updateGender' ]),
      async logout() {
        const [err, succ] = await uni.showModal({
          title: '提示',
          content: '确认退出登录吗？',
          confirmColor: '#f44336'
        }).catch(err => err)
        
        if (succ && succ.confirm) {
          this.updateToken('')
          this.updateNickname('')
          this.updateAvatarUrl('')
          this.updateGender('')
          uni.$showMsg('已退出登录')
        }
      },
      goto_infomation() {
        uni.navigateTo({
          url: "/subpkg/my-info-detail/my-info-detail"
        })
      },
      gotoActivityDetail(item){
        if(item === 3 || item === 4) return uni.$showMsg("功能开发中，敬请期待");
        uni.navigateTo({
          url:"/subpkg/activity-detail/activity-detail?id=" + item
        })
      },
      getAchievement(){
        uni.$showMsg("成就系统开发中，敬请期待");
      }
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #f5f5f5;
  }
  
  .my-userinfo-container {
    padding: 15px;
    
    .user-card {
      background: #fff;
      border-radius: 12px;
      padding: 15px;
      margin-bottom: 15px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      
      .user-header {
        display: flex;
        align-items: center;
        padding-bottom: 15px;
        margin-bottom: 15px;
        border-bottom: 1px solid #f0f0f0;
        
        .avatar {
          width: 70px;
          height: 70px;
          border-radius: 50%;
          margin-right: 15px;
          border: 2px solid #fff;
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        }
        
        .user-meta {
          flex: 1;
          
          .nickname {
            font-size: 18px;
            font-weight: bold;
            color: #333;
            margin-bottom: 5px;
          }
          
          .role-badge {
            display: inline-block;
            background: #e3f2fd;
            color: #1976d2;
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 12px;
            margin-bottom: 5px;
          }
          
          .signature {
            font-size: 13px;
            color: #666;
            line-height: 1.4;
          }
        }
      }
      
      .achievement-card {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px;
        background: #fff8e1;
        border-radius: 8px;
        
        .achievement-title {
          display: flex;
          align-items: center;
          font-size: 15px;
          color: #333;
          
          text {
            margin-left: 5px;
          }
        }
        
        .achievement-desc {
          font-size: 13px;
          color: #666;
          flex: 1;
          margin-left: 10px;
        }
      }
    }
    
    .menu-card {
      background: #fff;
      border-radius: 12px;
      margin-bottom: 15px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      
      .menu-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 15px;
        border-bottom: 1px solid #f0f0f0;
        
        &:last-child {
          border-bottom: none;
        }
        
        .menu-content {
          display: flex;
          align-items: center;
          font-size: 15px;
          
          text {
            margin-left: 10px;
          }
        }
      }
    }
  }
</style>